<template>
    <baseView>
        <div class="routeTrack">
            <div class="left-box">
                <DataTableV2 :tableColumn="tableColumn" @getData="onGetData" :params="params" :fetchApi="cleanByRoute"
                    :size="[15, 30]" ref="tableRef">
                    <!-- 查询 -->
                    <template #search>
                        <div class="form-box">
                            <el-form :inline="true">
                                <el-form-item label="路线选择">
                                    <routeSelect v-model:selectValue="params.routeid"> </routeSelect>
                                </el-form-item>
                                <el-form-item label="日期">
                                    <el-date-picker v-model="params.date" type="date" style="width: 150px;"
                                        value-format="YYYY-MM-DD" :clearabel="false" />
                                </el-form-item>
                                <el-form-item label="时间段">
                                    <el-select v-model="params.time" placeholder="请选择" style="width: 100px;">
                                        <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="search">
                                        <el-icon style="margin-right: 2px;">
                                            <Search />
                                        </el-icon>查询
                                    </el-button>
                                    <!-- <el-button type="primary" plain>重置</el-button> -->
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                    <!-- 重量 -->
                    <template #重量="{ row }">
                        {{ row['实际桶数'] }} 桶 {{ row['实际重量'] }} kg
                    </template>
                </DataTableV2>
            </div>
            <div class="right-box">
                <mapTrack ref="mapTrackRef" :params="params" :shopData="tableData"> </mapTrack>
            </div>
        </div>
    </baseView>
</template>

<script setup>
import { cleanByRoute } from "@/api/cleanRoute"
import dayjs from "dayjs"
const tableColumn = ref([
    {
        label: '商铺名',
        prop: '店铺名',
    },
    {
        label: '清运时间',
        prop: 'realtime',
    },
    {
        label: '清运状态',
        prop: 'status',
    },
    {
        label: "垃圾类型",
        prop: 'type',
    },
    {
        label: "清运数量",
        prop: '重量',
        slot: true,
    },
    {
        label: '作业人员',
        prop: "worker",
    },
])
const params = reactive({
    routeid: 1,
    time: "am",
    date: dayjs(new Date(2024, 9, 31)).format("YYYY-MM-DD"),
    pagenum: 1,
    pagesize: 15
})
const tableData = ref([])
const mapTrackRef = ref(null)
function onGetData(data) {
    tableData.value = data
    // mapTrackRef.value.createTrack()
}
const tableRef = ref(null)
function search() {
    params.pagenum = 1
    tableRef.value.fetchList()
}
const timeOptions = [
    {
        id: 1,
        label: '上午',
        value: "am"
    },
    {
        id: 2,
        label: '下午',
        value: "pm"
    }
]



</script>

<style lang="scss" scoped>
.form-box {
    display: flex;
    justify-content: flex-end;
}

.routeTrack {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .left-box,
    .right-box {
        width: 49%;
    }
}

.point-img {
    cursor: pointer;
}

.base-box {
    width: 54px;
    height: 28px;
    border-radius: 4px;
    margin: 0 auto;
}

.noClean {
    color: rgba(255, 255, 255, 1);
    background: rgba(197, 207, 224, 1);
}

.cleaning {
    color: rgba(36, 211, 255, 1);
    background: rgba(36, 211, 255, 0.2);
}

.cleaned {
    color: rgba(14, 204, 90, 1);
    background: rgba(208, 243, 222, 1);
}
</style>